<template>
  <view
    class="panda-container"
    :style="{ backgroundImage: `url(${oss2('index/202304/index_bg.png')})` }"
  >
    <view class="pt-37px">
      <home-user-card :info="info" />
    </view>
    <!-- <image class="w-375px h-81.5px" :src="oss2('index/santi/kv_1@2x.png')" /> -->

    <view
      class="w-375px h-480px cover mt-21px"
      :style="{
        backgroundImage: `url(${ossImg('index/202304/kv_2.png')})`,
      }"
    >
      <view
        class="w-181.5px h-36.5px cover newImage"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/qxss_pic.png')})`,
        }"
      ></view>
      <swiper
        class="w-265px h-359.5px kuang_video"
        :current="currentVideo"
        :indicator-dots="false"
        @animationfinish="VideoChange"
      >
        <swiper-item>
          <view class="w-265px h-359.5px">
            <video
              class="w-265px h-359.5px video"
              autoplay="true"
              @ended="currentVideo = 0"
              object-fit="cover"
              :show-mute-btn="true"
              :show-fullscreen-btn="false"
              muted="true"
              :src="oss2('index/santi/panda.mp4')"
            ></video>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="w-265px h-359.5px">
            <video
              class="w-265px h-359.5px video"
              autoplay="true"
              @ended="currentVideo = 1"
              object-fit="cover"
              :show-mute-btn="true"
              :show-fullscreen-btn="false"
              muted="true"
              :src="oss2('index/santi/cake.mp4')"
            ></video>
          </view>
        </swiper-item>
      </swiper>

      <view class="video_dot">
        <view
          v-for="(item, index) in 2"
          class="dot_item"
          :key="item"
          :class="{ isActive: currentVideo === index }"
        ></view>
      </view>

      <view class="kv_btn" @click.stop="toFresh"></view>
    </view>

    <view
      class="w-375px h-535px cover pt-138.5px -mt-20.5px Activity"
      :style="{
        backgroundImage: `url(${ossImg('index/202304/Activity_bg.png')})`,
      }"
    >
      <view
        class="w-375px h-385px cover"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/Activity_1.png')})`,
        }"
        @click.stop="toBuyNow2"
      >
      </view>
    </view>

    <view
      class="w-375px h-384px cover mt-17.5px"
      :style="{
        backgroundImage: `url(${ossImg('index/202304/Activity_2.png')})`,
      }"
      @click.stop="tobuyNow"
    >
    </view>

    <view
      class="w-375px h-196px cover flex justify-center"
      :style="{
        backgroundImage: `url(${ossImg('index/202304/vip_card.png')})`,
      }"
    >
      <view
        class="w-157px h-93px cover mt-84.5px mr-7.5px"
        @click.stop="getCoupon('c8bdf95127cb79cca73ec0b51900db65')"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/yhq_1.png')})`,
        }"
      ></view>
      <view
        class="w-157px h-93px cover mt-84.5px"
        @click.stop="getCoupon('634cb967e173700084eac78a')"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/yhq_2.png')})`,
        }"
      ></view>
    </view>

    <image
      class="w-375px h-58.5px mt-22px"
      @click.stop="toEmo"
      :src="ossImg('index/202304/title.png')"
    />

    <view
      class="w-375px mt-22px flex justify-center"
      style="flex-wrap: wrap; align-content: flex-start"
    >
      <!-- <image
        class="w-375px h-120px -mt-25px"
        :src="oss2('newYear/part5_title.png')"
      /> -->

      <view
        class="w-172px h-239px cover"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/cp1.png')})`,
        }"
        @click.stop="toBuy1"
      ></view>
      <view
        class="w-172px h-239px cover"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/cp2.png')})`,
        }"
        @click.stop="toBuy2"
      ></view>
      <view
        class="w-172px h-239px cover"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/cp3.png')})`,
        }"
        @click.stop="toBuy3"
      ></view>
      <view
        class="w-172px h-239px cover"
        :style="{
          backgroundImage: `url(${ossImg('index/202304/cp4.png')})`,
        }"
        @click.stop="toBuy4"
      ></view>
    </view>

    <!-- <image
      class="w-375px h-136px mt-100px"
      :src="ossImg('index/202303/title@2x.png')"
    />
    <view style="position: relative" class="-mt-36px">
      <swiper
        class="swiper w-303px h-445px pt-10px"
        :current="isCurrent"
        :indicator-dots="false"
        :autoplay="true"
        @animationfinish="bottomBannerChange"
        style="margin: 0 auto"
      >
        <swiper-item>
          <image
            class="w-303px h-445px"
            :src="ossImg('index/santi/banner_1@2x.png')"
            @click.stop="toBanner('62d51d16d95b1c00801e66cd')"
          />
        </swiper-item>
      </swiper>

      <view class="rabbit w-121px h-106px">
        <image class="w-121px h-106px" :src="oss2('newYear/rabbit.png')" />
      </view>
    </view> -->

    <!-- <view class="swiper_dot">
      <view
        v-for="(item, index) in 2"
        class="swiper_item"
        :key="item"
        :class="{ isActive: isCurrent === index }"
      ></view>
    </view> -->

    <view
      class="h5 w-375px h-310px mt-22px"
      :style="{
        backgroundImage: `url(${oss2('index/202304/move_hdk.png')})`,
      }"
    >
      <swiper
        class="w-289px h-220px ml-44px pt-75.5px"
        style="border-radius: 44rpx"
        :current="bottomBanner"
        :indicator-dots="false"
        :autoplay="true"
        @animationfinish="bottomBannerChange"
      >
        <!-- 礼品卡 -->
        <swiper-item>
          <image
            class="w-289px h-220px"
            style="border-radius: 44rpx"
            :src="oss2('funCard/banner.png')"
            @click.stop="toFunCard('/funCard/index', true)"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="w-289px h-220px"
            style="border-radius: 44rpx"
            :src="oss2('index/202304/pic1.png')"
            @click.stop="toPanda"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="w-289px h-220px"
            style="border-radius: 44rpx"
            :src="oss2('index/202303/OnpackBanner.png')"
            @click.stop="toOnPack"
          />
        </swiper-item>
        <!-- 许愿-05 -->
        <swiper-item>
          <image
            class="w-289px h-220px"
            style="border-radius: 44rpx"
            :src="oss2('others/minioreo-panda/minioreo_banner.jpg')"
            @click.stop="toWish"
          />
        </swiper-item>
        <!-- 春奥 -->
        <!-- <swiper-item>
          <image
            class="w-289px h-220px"
            style="border-radius: 44rpx"
            :src="oss2('index/202303/ChunAoBanner.png')"
            @click.stop="toSpring"
          />
        </swiper-item> -->
      </swiper>
    </view>

    <view class="w-375px center pb-10px">
      <view class="swiper_dot">
        <view
          v-for="(item, index) in 4"
          class="swiper_item"
          :key="item"
          :class="{ isActive: bottomBanner === index }"
        ></view>
      </view>
    </view>

    <view class="off-acc">
      <official-account></official-account>
    </view>
  </view>
</template>

<script setup>
import { oss2, ossImg, message } from "@/utils/utils";
import { ref } from "vue";
import { defineProps } from "vue";
import { addCoupon } from "@/services/coupon";
import HomeUserCard from "./home-user-card";
// import { getSettingMall } from "@/services/home";
// import { userLogin } from "@/services/utils";
// import { updateInfo } from "@/services/biscuit";

defineProps(["info"]);

const isCurrent = ref(0);
const currentVideo = ref(0);
const bottomBanner = ref(0);

const linkToDetail = () => {
  uni.navigateTo({
    url: "/campaign/pages/panda/detail",
  });
};

// const toFresh = () => {
//   console.log("dddddd");
//   linkTo(`/packageTokaeGame/index/index`)
// };

const toFresh = () => {
  // getApp().emdlz("track", "event", "homepage_new", "click", "try_now", "");

  currentVideo.value === 1
    ? linkTo(`/pages/goods/goods?id=${"e5487e1844f59bc417c305b56420249c"}`)
    : linkTo(`/pages/goods/goods?id=${"703965fe7f9fe4ee592f74b70c354a63"}`);
};

const toBuy1 = () => {
  linkTo(`/pages/goods/goods?id=${"703965fe7f9fe4ee592f74b70c354a63"}`);
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up3_${"703965fe7f9fe4ee592f74b70c354a63"}`,
  //   ""
  // );
};
const toBuy2 = () => {
  linkTo(`/pages/goods/goods?id=${"5f1c4205bf71ee9e29a1ee7d7c87bf56"}`);

  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up3_${"5f1c4205bf71ee9e29a1ee7d7c87bf56"}`,
  //   ""
  // );
};
const toBuy3 = () => {
  linkTo(`/pages/goods/goods?id=${"867fa300a617455059da64cfccc0cc60"}`);
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up3_${"867fa300a617455059da64cfccc0cc60"}`,
  //   ""
  // );
};
const toBuy4 = () => {
  linkTo(`/pages/goods/goods?id=${"e5487e1844f59bc417c305b56420249c"}`);
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up3_${"e5487e1844f59bc417c305b56420249c"}`,
  //   ""
  // );
};

const tobuyNow = () => {
  linkTo(`/pages/goods/goods?id=${"703965fe7f9fe4ee592f74b70c354a63"}`);
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up1_${"703965fe7f9fe4ee592f74b70c354a63"}`,
  //   ""
  // );
};

const toBuyNow2 = () => {
  linkTo(`/pages/goods/goods?id=${"75b8fe1a45fb3efa2bf3379b786ecdcf"}`);
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `snap_up2_${"75b8fe1a45fb3efa2bf3379b786ecdcf"}`,
  //   ""
  // );
};

const toEmo = () => {
  linkTo(
    "/pages/webView/webview?webSrc=https://w.url.cn/s/A6lfGuf#wechat_redirect"
  );
  // getApp().emdlz("track", "event", "homepage_new", "click", "receive_meme", "");
};

const linkTo = (url) => uni.navigateTo({ url });

const getCoupon = async (id) => {
  const res = await addCoupon({
    ...{ couponId: id, appId: process.env.WXAPPID },
  });
  if (res?.code === 200) {
    message(res.message);
  }

  if (id === "630ece9f5e91da007ff7bbe7") {
    // getApp().emdlz(
    //   "track",
    //   "event",
    //   "homepage_new",
    //   "click",
    //   `join_receive_${id}`,
    //   ""
    // );
  } else if (id === "630eced417fb6e00804bee07") {
    // getApp().emdlz(
    //   "track",
    //   "event",
    //   "homepage_new",
    //   "click",
    //   `receive_coupon_${id}`,
    //   ""
    // );
  }
};

const VideoChange = (e) => {
  currentVideo.value = e.detail.current;
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "vedio_change",
  //   `homepage_vedio_${e.detail.current}`,
  //   ""
  // );
};

const bottomBannerChange = (e) => {
  bottomBanner.value = e.detail.current;
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "slide",
  //   `activity_banner_${e.detail.current}`,
  //   ""
  // );
};

// const toBanner = (id) => {
//   linkTo(`/pages/goods/goods?id=${id}`);
//   getApp().emdlz(
//     "track",
//     "event",
//     "homepage_new",
//     "click",
//     `banner_${isCurrent.value}`,
//     ""
//   );
// };

const toFunCard = (path, redirect) => {
  console.log("~~~~~~~~~~~~~~~~~", getApp().globalData.user);
  if (
    getApp().globalData.user.nickname === null ||
    getApp().globalData.user.nickname === "" ||
    getApp().globalData.user.nickname === undefined
  ) {
    console.log(123456);
    return getApp().getWechatUserProfile({ path, redirect });
  }
  if (
    getApp().globalData.user.phone === null ||
    getApp().globalData.user.phone === ""
  ) {
    uni.setStorageSync("REDIRECT_URI", JSON.stringify({ path, redirect }));
    uni.navigateTo({ url: "/pages/vip/register" });
    return;
  }
  if (redirect) return uni.redirectTo({ url: path });
  uni.redirectTo({ url: path });
  // linkTo(`/funCard/index`);
};
// const toSpring = () => {
//   linkTo(`/campaign/pages/spring/index`);
//   getApp().emdlz(
//     "track",
//     "event",
//     "homepage_new",
//     "click",
//     `activity_banner_${bottomBanner.value}`,
//     ""
//   );
// };
// 许愿-05
const toWish = () => {
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `activity_banner_${bottomBanner.value}`,
  //   ""
  // );
  linkTo(`/campaign/pages/minioreo/index?from=pubid:wx;aid:minibanner`);
};

const toPanda = () => {
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `activity_banner_${bottomBanner.value}`,
  //   ""
  // );
  linkTo(`/campaign/pages/panda2023/index?from=pubid:wx;aid:footbanner`);
};

const toOnPack = async () => {
  // getApp().emdlz(
  //   "track",
  //   "event",
  //   "homepage_new",
  //   "click",
  //   `activity_banner_${bottomBanner.value}`,
  //   ""
  // );
  uni.navigateTo({
    url: `/pages/custom-page/index`,
  });
};
</script>

<style lang="less" scoped>
.panda-container {
  width: 100%;
  height: 2700px;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  .Activity {
    box-sizing: border-box;
  }

  image {
    display: block;
  }
}
.back-home {
  width: 68px;
  height: 23px;
  line-height: 23px;
  border-radius: 0 6px 6px 0;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 16px;
  color: white;
  font-size: 11px;
  text-align: center;
  //background: linear-gradient(top bottom, #8FC31E, #47B134);
  background: linear-gradient(to bottom, #8fc31e, #47b134);
}
.newImage {
  position: absolute;
  margin-left: 96.5px;
  margin-top: 0px;
  z-index: 5;
}

.kuang_video {
  padding-top: 23px;
  margin: 0 auto;
  border-radius: 25px;
  z-index: 1;
}

.video {
  border-radius: 25px;
}

.video_dot {
  margin: 0 auto;
  margin-top: 7px;
  width: 20px;
  display: flex;
  justify-content: space-around;
  .dot_item {
    width: 5px;
    height: 5px;
    border: solid 1px #bf760f;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .isActive {
    background-color: #bf760f;
  }
}
.kv_btn {
  width: 120px;
  height: 30px;
  margin: 0 auto;
  margin-top: 10px;
  z-index: 2;
}

.swiper_dot {
  width: 71px;
  height: 3.5px;
  display: flex;
  margin: 0 auto;
  background-color: #ffffff;
  margin-top: 21px;

  .swiper_item {
    width: 50%;
    height: 100%;
  }

  .isActive {
    background-color: #bf760f;
  }
  .swiper_item:first-child {
    border-top-left-radius: 1.75px;
    border-bottom-left-radius: 1.75px;
  }
  .swiper_item:last-child {
    border-top-right-radius: 1.75px;
    border-bottom-right-radius: 1.75px;
  }
}

.BannerSwiper_dot {
  margin: 0 auto;
  margin-top: 16.5px;
  width: 20px;
  display: flex;
  justify-content: space-around;
  .dot_item {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #e1afb1;
    box-sizing: border-box;
  }
  .isActive {
    background-color: #e0ab61;
  }
}

.rabbit {
  position: absolute;
  bottom: -37px;
  left: 35px;
}

.h5 {
  position: relative;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  // display: flex;
  // align-items: center;
  // padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
  // padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.off-acc {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}
</style>
